<!--
 * @Author: xjt
 * @Date: 2021-06-28 16:48:20
 * @LastEditTime: 2021-06-29 21:19:15
 * @Description: file content
 * @LastEditors: xjt
-->
<template>
  <div class="left">
    <div class="primaryTitle">
      <strong>总览</strong>
    </div>
    <div class="panelItem">
      <div class="numberTotal">
        全市
        <mark>10</mark>个区，
        <mark>120</mark>个街道，
        <mark>1542</mark>个社区。
      </div>
      <el-table
        :data="tableData"
        class="treeTable"
        row-key="belongto"
        :load="loadData"
        default-expand-all
        lazy
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="area_name"></el-table-column>
        <el-table-column prop="ry_count" label="在隔离人员"></el-table-column>
        <el-table-column prop="hotel_count" label="隔离点数"></el-table-column>
        <el-table-column prop="jduser_count" label="工作人员"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getPublicTotal, getPublicSubInfo } from '@/views/wy-home/api'
export default {
  mounted () {
    this.init()
  },
  data () {
    return {
      tableData: [],
    }
  },
  methods: {
    init () {
      getPublicTotal().then(res => {
        const { collect, publicInfoList } = res.data.data
        this.tableData = [collect, ...publicInfoList.map(_ => ({ ..._, hasChildren: true }))]
        console.log(this.tableData);
      })
    },
    loadData (row, treeNode, resolve) {
      console.log(row);
      getPublicSubInfo(row.belongto).then(res => {
        resolve(res.data.data.publicInfoList)
      })
    }
  },
}
</script>

<style lang="scss" scoped>
/deep/ .el-table [class*="el-table__row--level"] .el-table__expand-icon {
  color: #fff !important;
}
</style>
